<template>
	<view class="index" :hidden="isHidePage">
		<view class="bg-position"><image src="../../static/img/bg-index.png" class="bg-img"></image></view>
		<view class="swiper-box">
			<view class="page-section swiper">
				<view class="mask" :hidden="isHiddenMask"></view>
				<view class="page-section-spacing">
					<swiper
						class="swiper"
						:indicator-dots="swiperOptions.indicatorDots"
						:autoplay="swiperOptions.autoplay"
						:interval="swiperOptions.interval"
						:duration="swiperOptions.duration"
						:indicator-color="swiperOptions.indicatorColor"
						:indicator-active-color="swiperOptions.indicatorActiveColor"
						:circular="swiperOptions.circular"
					>
						<swiper-item v-for="(item, index) in swiperImgs" :key="index" @click="swiperClick(item.photoMsgFlag)">
							<image class="swiper-item" :src="item.photoUrl" @load="imagesLoad"></image>
						</swiper-item>
					</swiper>
				</view>
			</view>
		</view>
		<view class="service-list">
			<view v-for="(item, index) in servicelist" :key="index" class="item">
				<view class="icon"><text :class="'iconfont iconfont-' + item.icon" @click="serviceClick(item.path)"></text></view>
				<view class="name">{{ item.name }}</view>
			</view>
		</view>
	</view>
</template>

<script>
let util = require('../../utils/utils.js');
let api = require('../../utils/api.js');
export default {
	data() {
		return {
			isHidePage: true,
			swiperOptions: {
				indicatorDots: false,
				autoplay: true,
				interval: 3000,
				duration: 1000,
				indicatorColor: '#FFF',
				indicatorActiveColor: '#1F95EC',
				circular: true
			},
			isHiddenMask: true, //当只有一个图片的时候禁止滑动
			swiperImgs: [],
			servicelist: [
				{
					icon: 'register',
					path: '/pages/register/register?type=4',
					name: '用户注册'
				},
				{
					icon: 'unbound',
					path: '/pages/register/home?type=5',
					name: '解除绑定'
				},
				{
					icon: 'pay',
					path: '/pages/query/pay?type=1',
					name: '缴费历史'
				},
				{
					icon: 'report',
					path: '/pages/query/record?type=2',
					name: '上报历史'
				},
				{
					icon: 'edit',
					path: '/pages/query/readMeter?type=3',
					name: '抄表历史'
				}
			]
		};
	},
	async onLoad() {
		console.log('load');
		util.showLoading('加载中...');
		let that = this;
		let config = await api.getConfigInfo();
		let photoArray = config.data.photoArray;
		let swiperImgs = [];
		let len = photoArray.length;
		if (!len) {
			let viewType = config.viewType;
			swiperImgs = [
				{
					photoUrl: `../../static/img/${viewType}.png`,
					photoMsgFlag: 0
				}
			];
		} else {
			swiperImgs = photoArray.map(item => {
				item.photoUrl = util.getResourceUrl(item.photoUrl);
				return item;
			});
		}
		that.swiperImgs = swiperImgs;
		that.swiperOptions.indicatorDots = len > 1 ? true : false;
		that.isHiddenMask = len > 1 ? true : false;
	},

	methods: {
		imagesLoad() {
			wx.hideLoading();
			this.isHidePage = false;
		},
		/**
		 * 点击轮播图片
		 */
		swiperClick(photoMsgFlag) {
			if (photoMsgFlag == '1') {
				util.navigateTo('/pages/index/marksownShow');
			}
		},
		goRegister(type,path){
			if (type == '4') {
				util.navigateTo(path);
			} else {
				util.showModal('当前没有绑定任何用户,前往绑定', () => {
					util.navigateTo('/pages/register/register');
				});
			}
		},
		/**
		 * 点击服务
		 */
		async serviceClick(path) {
			let data = await util.getStorage('config');
			let type = path.split('=')[1];
			if (data.data.hasOwnProperty('userArray')) {
				let userArray = data.data.userArray;
				let len = userArray.length;
				if (len > 0) {
					if (type == '4') {
						util.navigateTo('/pages/register/home?type=4');
					} else if (type == '5') {
						util.navigateTo(path);
					}else{
						if (len > 1) {
							util.navigateTo(`/pages/query/selectUser?type=${type}`);
						} else {
							let o = userArray[0];
							let uniqueId = o.uniqueId;
							let uniqueType = o.uniqueType;
							let reqUrlCode = o.reqUrlCode;
							let url = `${path}&uniqueId=${uniqueId}&uniqueType=${uniqueType}&reqUrlCode=${reqUrlCode}`;
							util.navigateTo(url);
						}
					}
				} else {
					this.goRegister(type,path);
				}
			} else {
				this.goRegister(type,path);
			}
		}
	}
};
</script>

<style lang="scss">
.index {
	position: relative;
	.swiper-box {
		position: relative;
		padding: $uni-spacing-row-base $uni-spacing-row-base;
		box-sizing: border-box;
		.swiper {
			height: 34vh;
			box-radius: $uni-border-radius-base;
			box-shadow: $uni-shadow-base;
			image {
				width: 100%;
				height: 100%;
			}
		}
	}
	.service-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
		padding: 0 $uni-spacing-row-lg;
		margin: 0 -36upx;
		.item {
			width: 25%;
			text-align: center;
			margin-top: $uni-spacing-col-lg;
			.icon {
				margin-bottom: 16upx;
				text {
					display: inline-block;
					font-size: 58upx;
					width: $uni-img-size-md;
					height: $uni-img-size-md;
					line-height: $uni-img-size-md;
					text-align: center;
					border-radius: 50%;
					background: $uni-bg-color-vertical;
					color: $uni-color-white;
					&:active {
						background: $uni-bg-color-vertical-hover;
					}
				}
			}
			&:last-child {
				margin-right: auto;
			}
		}
	}
}
</style>
